<template>
  <div class="app-container">

    <div style="text-align: center;margin-bottom: 1%;margin-top: 1%">
      <!--查询表单-->
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="title" placeholder="输入标题"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
          <el-button type="default" icon="el-icon-delete" @click="resetData()">清空</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="success" icon="el-icon-circle-plus-outline" @click="add()">添加</el-button>
        </el-form-item>

      </el-form>
    </div>

    <div style="text-align: center;margin-bottom: 1%;margin-top: 1%;margin-left: 15%;margin-right: 15%">
      <!-- 表格 -->
      <el-table :data="list" border stripe style="padding: 30px 0; text-align: center">
        <el-table-column prop="title" label="标题" width="300" align="center"/>
        <el-table-column prop="createTime" label="创建时间" width="200" align="center"/>

        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" icon="el-icon-view"
                       @click="listenDetail(scope.row.id,scope.row.title)">查看
            </el-button>

            <el-button type="primary" size="mini" icon="el-icon-edit" @click="openDialog(scope.row.id)">编辑
            </el-button>

            <el-button type="danger" size="mini" icon="el-icon-error" @click="remove(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20]"
      style="padding: 30px 0; text-align: center"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="fetchData"
      @size-change="changePageSize"/>

    <!-- 编辑弹窗-->
    <el-dialog
      title="听力题目"
      :visible.sync="dialogVisible"
      width="50%"
      style="text-align: center">

      <el-form :inline="true">
        <el-form-item>
          标题
          <el-input v-model="listen.title" placeholder="输入标题" style="margin-bottom: 1%"/>
        </el-form-item>
        <el-form-item>
          音频
          <el-upload
            :on-success="handleVodUploadSuccess"
            :on-exceed="handleUploadExceed"
            :before-remove="handleBeforeRemove"
            :on-remove="handleOnRemove"
            :file-list="fileList"
            :action="BASE_API+'/aliyun-service/uploadImage'"
            :limit="1"
            accept=".mp3"
            class="upload-demo">
            <el-button size="small" type="success" @click="uploadButton=true">上传音频</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">最大支持1G，<br>
                支持MP3格式上传
              </div>
              <i class="el-icon-question"/>
            </el-tooltip>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="danger" @click="cancel()">取 消</el-button>
        <el-button type="primary" :disabled="uploadButton" @click="update()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import listenApi from '@/api/listen'

  export default {
    // 页内数据
    data() {
      return {
        list: [],
        page: 1,
        limit: 5,
        total: 0,
        subject: {},
        dialogVisible: false,
        title: '',
        listen: {},
        fileList: [],
        saveVideoBtnDisabled: false,
        BASE_API: process.env.BASE_API, // 接口API地址
        uploadButton: true
      }
    },

    //初始化
    created() {
      this.fetchData()
    },

    methods: {
      //获取数据
      fetchData(page = 1) {
        this.page = page
        let listen = {};
        listen.title = this.title
        listenApi.getList(this.page, this.limit, listen)
          .then(response => {
            this.list = response.data.rows
            this.total = response.data.total
          })
          .catch(error => {
            console.log(error)
          })
      },

      // 改变每页记录数
      changePageSize(size) {
        this.limit = size
        this.fetchData()
      },

      // 重置表单
      resetData() {
        this.title = ''
        this.fetchData()
      },

      //查询详情
      listenDetail(id, title) {
        this.$router.push({
          path: 'listen/details',
          name: '听力详情',
          params: {
            id: id,
            title: title
          }
        })
      },

      // 添加分类
      add() {
        this.listen = {}
        this.fileList = []
        this.dialogVisible = true
      },

      //成功上传
      handleVodUploadSuccess(response, file, fileList) {
        if (response.success) {
          this.listen.audio = response.data.url
        } else {
          this.$message.error('上传失败')
        }
        this.uploadButton = false;
      },

      //视图上传多于一个音频
      handleUploadExceed(files, fileList) {
        this.$message.warning('想要重新上传视频，请先删除已上传的音频')
      },

      // 删除视频文件确认
      handleBeforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },

      // 删除视频
      handleOnRemove(file, fileList) {
        if (!this.video.videoSourceId) {
          return
        }

        video.removeVideo(this.video.videoSourceId).then(response => {
          // 删除视频的同时更新video数据信息
          this.video.videoSourceId = ''
          this.video.videoOriginalName = ''
          this.fileList = []
          this.$message.success(response.message)
        })
      },

      // 取消编辑
      cancel() {
        this.dialogVisible = false
        this.listen = {}
      },

      // 删除记录
      remove(id) {
        // 询问是否删除
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return listenApi.delete(id)
        }).then(response => {
          // 刷新页面
          this.fetchData()
          // 弹出成功提示
          this.$message({
            message: response.message,
            type: 'success'
          })
        })
      },

      //打开对话框
      openDialog(id) {
        this.dialogVisible = true
        this.listen = {}
        listenApi.getListening(id)
          .then(response => {
            this.listen = response.data.item
            if (this.listen.audio !== 'null') {
              this.fileList = [{ name: this.listen.audio }]
              this.uploadButton = false
            }
          })
          .catch(error => {
            console.log(error)
          })
      },

      //更新分类
      update() {
        if (this.listen.id == null) {
          listenApi.add(this.listen)
            .then(response => {
              this.dialogVisible = false
              this.fetchData()
              this.listen = {}
            })
            .catch(error => {
              console.log(error)
            })
        } else {
          listenApi.update(this.listen)
            .then(response => {
              this.dialogVisible = false
              this.fetchData()
              this.listen = {}
            })
            .catch(error => {
              console.log(error)
            })
        }
      }
    }
  }
</script>
